<template>
  <div id="bar_dv2" style="width:100% ;height:320px;overflow:hidden" ref="chart"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "scoreCharts",
  data() {
    return {};
  },
  mounted() {
    this.RadarChart();
  },
  methods: {
    RadarChart() {
      var bar_dv2 = this.$refs.chart;
      if (bar_dv2) {
        console.log("bar_dv不为空");
        let scoreCharts = this.$echarts.init(bar_dv2);
        scoreCharts.setOption({
          // title: {
          //   text: "学科喜爱度",
        
          // },
          legend: {
            data:  ["实名票数", "匿名票数"],
            
          },
          
          radar: [
            {
              indicator: [
                { text: "指标一" },
                { text: "指标二" },
                { text: "指标三" },
                { text: "指标四" },
                { text: "指标五" },
              ],
              center: ["0%", "-50%"],
              radius: 100,
              startAngle: 90,
              splitNumber: 4,
              shape: "circle",
              name: {
                formatter: "[{value}]",
                textStyle: {
                  color: "#72ACD1",
                },
              },
              splitArea: {
                areaStyle: {
                  color: [
                    "rgba(114, 172, 209, 0.2)",
                    "rgba(114, 172, 209, 0.4)",
                    "rgba(114, 172, 209, 0.6)",
                    "rgba(114, 172, 209, 0.8)",
                    "rgba(114, 172, 209, 1)",
                  ],
                  shadowColor: "rgba(0, 0, 0, 0.3)",
                  shadowBlur: 10,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.5)",
                },
              },
              // splitLine: {
              //   lineStyle: {
              //     color: "rgba(255, 255, 255, 0.5)",
              //   },
              // },
            },
            {
              indicator: [
                { text: "文学系", max: 1500 },
                { text: "理学系", max: 1500 },
                { text: "工学系", max: 1500 },
                { text: "法学系", max: 1000 },
                { text: "经济学系", max: 1000 },
                { text: "管理学系", max: 1000 },
              ],
              center: ["50%", "55%"],
              radius: 110,
            },
          ],
          series: [
            {
              name: "",
              type: "radar",
              emphasis: {
                lineStyle: {
                  width: 4,
                },
              },
              data: [
                // {
                //   value: [100, 8, 0.4, -80, 2000],
                //   name: "图一",
                //   symbol: "rect",
                //   symbolSize: 5,
                //   lineStyle: {
                //     type: "dashed",
                //   },
                // },
                {
                  value: [60, 5, 0.3, -100, 1500],
                  name: "图二",
                  areaStyle: {
                    color: "rgba(255, 255, 255, 0.8)",
                  },
                },
              ],
            },
            {
              name: "喜爱度",
              type: "radar",
              radarIndex: 1,
              data: [
                {
                  value: [1200, 1180, 1300, 900, 850, 700],
                  name: "匿名票数",
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                },
                {
                  value: [900, 1130, 1400, 300, 700, 600],
                  name: "实名票数",
                  areaStyle: {
                    opacity: 0.9,
                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                      {
                        color: "#B8D3E4",
                        offset: 0,
                      },
                      {
                        color: "#72ACD1",
                        offset: 1,
                      },
                    ]),
                  },
                },
              ],
            },
          ],
        });
      }
    },
  },
};
</script>